<template>
  <v-layout type="map">
    <div class="branch">
      <div class="menu">
        <div class="btns">
          <a href="javascript:;"><i class="el-icon-video-play"></i></a>
          <a href="javascript:;"><i class="el-icon-video-pause"></i></a>
          <a href="javascript:;"><i class="stop-btn"></i></a>
        </div>
        <p class="title">想定名称名称名称</p>
        <p class="title">次数：30次（大样本）</p>
        <el-menu default-active="1" background-color="#1C1E1F" @open="isOpen = true" @close="isOpen = false"
          class="menu-vertical">
          <el-submenu :index="`${e}`" v-for="e in 4" :key="e">
            <template slot="title">
              <!-- <i class="el-icon-plus" v-if="isOpen"></i>
                <i class="el-icon-minus" v-else></i> -->
              <span class="branch-name">触发器名称（分支点）</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="`${e}-1`"><span class="">任务名称（分支）</span></el-menu-item>
              <el-menu-item :index="`${e}-2`"><span class="">任务名称（分支）</span></el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="branch-detail">
        <div class="tree-chart-box">
          <tree-chart :option="treeData" />
        </div>
        <div class="chart">
          <div class="chart-item">
            <chart :option="testData" />
          </div>
          <div class="chart-item">
            <chart :option="testData" />
          </div>
        </div>
      </div>
    </div>
  </v-layout>
</template>
  
<script>
import chart from './module/chart'
import treeChart from './module/tree-chart'
import { treeData } from './module/tree-data'
export default {
  data() {
    return {
      isOpen: false,
      imageNodes: null,
      testData: {},
      treeData,
      //  detailData: {}
      // graph: false
    };
  },
  components: {
    chart,
    treeChart
  },
  async mounted() {
    this.initTestData()
  },
  destroyed() {

  },
  methods: {
    
    initTestData() {
      this.testData = {
        title: '任务成功率',
        values: [[1667736469,"0.07517290115356445"],[1667736484,"0.07517290115356445"],[1667736499,"0.0466618537902832"],[1667736514,"0.0466618537902832"],[1667736529,"0.047148704528808594"],[1667736544,"0.047148704528808594"],[1667736559,"0.04716157913208008"],[1667736574,"0.04712104797363281"],[1667736589,"0.04712104797363281"],[1667736604,"0.04716348648071289"],[1667736619,"0.04716348648071289"],[1667736634,"0.04720735549926758"],[1667736649,"0.04720735549926758"],[1667736664,"0.04720735549926758"],[1667736679,"0.04715776443481445"],[1667736694,"0.04715776443481445"],[1667736709,"0.04724740982055664"],[1667736724,"0.04724740982055664"],[1667736739,"0.04726600646972656"],[1667736754,"0.047206878662109375"],[1667736769,"0.047206878662109375"],[1667736784,"0.04714345932006836"],[1667736799,"0.04714345932006836"],[1667736814,"0.0472254753112793"],[1667736829,"0.0472254753112793"],[1667736844,"0.0472254753112793"],[1667736859,"0.04716682434082031"],[1667736874,"0.04722452163696289"],[1667736889,"0.04722452163696289"],[1667736904,"0.047266483306884766"],[1667736919,"0.047266483306884766"],[1667736934,"0.047266483306884766"],[1667736949,"0.04722929000854492"],[1667736964,"0.04722929000854492"],[1667736979,"0.04723930358886719"],[1667736994,"0.04723930358886719"],[1667737009,"0.02648305892944336"],[1667737024,"0.02648305892944336"],[1667737039,"0.026507854461669922"],[1667737054,"0.026514530181884766"],[1667737069,"0.026514530181884766"],[1667737084,"0.026413917541503906"],[1667737099,"0.026413917541503906"],[1667737114,"0.026413917541503906"],[1667737129,"0.02642679214477539"],[1667737144,"0.026447296142578125"],[1667737159,"0.026447296142578125"],[1667737174,"0.02645730972290039"],[1667737189,"0.02645730972290039"],[1667737204,"0.02645730972290039"],[1667737219,"0.026455402374267578"],[1667737234,"0.026455402374267578"],[1667737249,"0.026463031768798828"],[1667737264,"0.026463031768798828"],[1667737279,"0.026473045349121094"],[1667737294,"0.026473045349121094"],[1667737309,"0.02649974822998047"],[1667737324,"0.02649974822998047"],[1667737339,"0.026492595672607422"],[1667737354,"0.026492595672607422"],[1667737369,"0.02651834487915039"],[1667737384,"0.02651834487915039"],[1667737399,"0.026431560516357422"],[1667737414,"0.026437759399414062"],[1667737429,"0.026437759399414062"],[1667737444,"0.02643442153930664"],[1667737459,"0.02643442153930664"],[1667737474,"0.02643442153930664"],[1667737489,"0.02644634246826172"],[1667737504,"0.02644634246826172"],[1667737519,"0.026456832885742188"]].reverse()
      }
    }
  }
}
</script>
<style lang="less" scoped>
// /deep/ .el-menu-item.is-active{
//   background: rgba(0,119,255,0.3);
// }
.tree-chart-box{
  width: 100%;
  height: 600px;
}

.menu-vertical {
  border-right: 1px solid #111310;
  height: 100%;
}

.branch {
  display: flex;
  width: 100%;
  background: #1C1E1F;

  .is-active {
    background: rgba(0, 119, 255, 0.3) !important;
  }
}

.menu {
  width: 248px;

  .branch-name {
    color: #FFF;
  }

  .btns {
    overflow: hidden;
    padding: 20px 0 0 20px;

    a {
      width: 46px;
      height: 26px;
      background: #026DE7;
      border-radius: 4px;
      float: left;
      margin-right: 8px;
      text-align: center;
      line-height: 26px;
      color: #FFF;
      font-size: 18px;
    }
  }

  .title {
    line-height: 48px;
    padding-top: 12px;
    color: #D8D8D8;
    padding-left: 20px;
  }

  .stop-btn {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 10px;
    margin-top: 4px;
    position: relative;

    &::after {
      content: ' ';
      display: block;
      width: 6px;
      height: 6px;
      background: rgba(255, 255, 255, .85);
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -3px 0 0 -3px;
    }
  }
}

.branch-detail {
  flex: 1;
  position: relative;
  .graph{
    min-height: 400px;
    .graph-container-box{
      height: 400px;
    }
  }
  .stencil{
    opacity: 0;
  }
  #container{
    display: none;
  }
}
.chart{
  display: flex;
  // margin: 0 -8px;
  width: 100%;
  padding-top: 16px;
  .chart-item{
    background: #242730;
    border-radius: 10px;
    margin: 0 8px;
    height: 334px;
    flex: 1;
  }
}
</style>